<template>
	<view class="accounting-container">
		<!-- 顶部导航栏 -->
		<view class="header-wrapper">
			<view class="header-content">
				<view class="header-left-section">
					<navigator url="/pages/index/index" open-type="switchTab" class="back-button">
						<u-icon name="arrow-left" color="#1e88e5"></u-icon>
					</navigator>
					<text class="header-title">记账管理</text>
				</view>
				<view class="header-right-section">
					<view class="filter-button" @click="toggleFilterPanel">
						<u-icon name="list-dot" color="#52aa7d" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 筛选面板 -->
		<view class="filter-panel" v-if="showFilterPanel">
			<view class="filter-section">
				<text class="filter-label">日期范围</text>
				<view class="date-range-picker">
					<picker mode="date" class="date-picker" @change="onStartDateChange">
						<view class="picker-content">{{ startDate || '开始日期' }}</view>
					</picker>
					<text class="date-separator">至</text>
					<picker mode="date" class="date-picker" @change="onEndDateChange">
						<view class="picker-content">{{ endDate || '结束日期' }}</view>
					</picker>
				</view>
			</view>

			<view class="filter-section">
				<text class="filter-label">记录类型</text>
				<picker class="type-picker" @change="onRecordTypeChange">
					<view class="picker-content">
						{{ recordTypes[selectedRecordType].label }}
					</view>
				</picker>
			</view>

			<view class="filter-section">
				<text class="filter-label">收入类型</text>
				<picker class="income-picker" @change="onIncomeCategoryChange">
					<view class="picker-content">
						{{ incomeCategories[selectedIncomeCategory].label }}
					</view>
				</picker>
			</view>

			<view class="filter-section">
				<text class="filter-label">支出类型</text>
				<picker class="expense-picker" @change="onExpenseCategoryChange">
					<view class="picker-content">
						{{ expenseCategories[selectedExpenseCategory].label }}
					</view>
				</picker>
			</view>

			<view class="filter-actions">
				<view class="reset-button" @click="resetFilter">重置</view>
				<view class="apply-button" @click="applyFilter">确定</view>
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-container">
			<view class="stat-card income-card">
				<text class="stat-label">总收入</text>
				<text class="stat-value">¥{{ formatCurrency(totalIncome) }}</text>
			</view>
			<view class="stat-card expense-card">
				<text class="stat-label">总支出</text>
				<text class="stat-value">¥{{ formatCurrency(totalExpense) }}</text>
			</view>
		</view>

		<!-- 记账记录列表 -->
		<view class="records-container" v-if="accountingRecords.length > 0">
			<view class="records-header">
				<text class="records-title">记账记录</text>
			</view>
			<view class="records-list">
				<view class="record-item" v-for="record in accountingRecords" :key="record.id">
					<view class="record-icon" :class="record.type === 'income' ? 'income-icon' : 'expense-icon'">
						<u-icon :name="record.type === 'income' ? 'plus-circle' : 'minus-circle'"
							:color="record.type === 'income' ? '#10B981' : '#EF4444'" size="24"></u-icon>
					</view>
					<view class="record-details">
						<text class="record-category">{{ record.categoryLabel }}</text>
						<text class="record-date">{{ record.date }}</text>
					</view>
					<view class="record-amount" :class="record.type === 'income' ? 'income-amount' : 'expense-amount'">
						{{ record.type === 'income' ? '+' : '-' }}¥{{ formatCurrency(record.amount) }}
					</view>
					<view class="record-actions" @click="showActionSheet(record)">
						<u-icon name="more-dot-fill" color="#9ca3af" size="24"></u-icon>
						<view class="action-menu" v-if="actionSheetRecordId === record.id">
							<navigator class="edit-action" :url="'/pageNew/pages/accounting/edit?id=' + record.id">
								<u-icon name="edit-pen" color="#374151" size="18" class="menu-icon"></u-icon>
								<text>编辑</text>
							</navigator>
							<view class="delete-action" @click="confirmDelete(record.id)">
								<u-icon name="trash" color="#EF4444" size="18" class="menu-icon"></u-icon>
								<text>删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<u-empty text="暂无记账记录" mode="list"></u-empty>
			<text class="empty-message">点击下方按钮添加第一条记账记录</text>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer-container">
			<view class="footer-content">
				<view class="footer-summary">
					<text class="summary-text">总计: </text>
					<text class="summary-amount">¥{{ formatCurrency(totalAmount) }}</text>
				</view>
				<view class="footer-actions">
					<navigator class="expense-button" url="/pageNew/pages/accounting/add-expense">
						<u-icon name="minus-circle" color="#ffffff" size="18" class="footer-icon"></u-icon>
						<text>支出</text>
					</navigator>
					<navigator class="income-button" url="/pageNew/pages/accounting/add-income">
						<u-icon name="plus-circle" color="#ffffff" size="18" class="footer-icon"></u-icon>
						<text>收入</text>
					</navigator>
				</view>
			</view>
		</view>

		<!-- 删除确认弹窗 -->
		<view class="delete-modal" v-if="showDeleteModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">确认删除</text>
				</view>
				<view class="modal-body">
					<text class="modal-message">您确定要删除这条记账记录吗？此操作不可撤销。</text>
					<view class="modal-actions">
						<button class="cancel-button" @click="toggleDeleteModal">取消</button>
						<button class="confirm-button" @click="confirmDeleteRecord">删除</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模拟数据
				mockRecords: [{
						id: "1698633600000",
						type: "income",
						category: "salary",
						categoryLabel: "工资收入",
						amount: 15000.00,
						date: this.formatDate(new Date()),
						remarks: "10月份工资到账",
						createdAt: new Date().toISOString()
					},
					{
						id: "1698637200000",
						type: "expense",
						category: "food",
						categoryLabel: "餐饮",
						amount: 268.50,
						date: this.formatDate(new Date()),
						remarks: "公司团建聚餐",
						createdAt: new Date().toISOString()
					}
				],

				showFilterPanel: false,
				startDate: '',
				endDate: '',
				recordTypes: [{
						value: 'all',
						label: '全部'
					},
					{
						value: 'income',
						label: '收入'
					},
					{
						value: 'expense',
						label: '支出'
					}
				],
				selectedRecordType: 0,
				incomeCategories: [{
						value: 'all',
						label: '全部'
					},
					{
						value: 'salary',
						label: '工资收入'
					},
					{
						value: 'business',
						label: '经营收入'
					},
					{
						value: 'investment',
						label: '投资收益'
					},
					{
						value: 'other',
						label: '其他收入'
					}
				],
				selectedIncomeCategory: 0,
				expenseCategories: [{
						value: 'all',
						label: '全部'
					},
					{
						value: 'food',
						label: '餐饮'
					},
					{
						value: 'transportation',
						label: '交通'
					},
					{
						value: 'housing',
						label: '住房'
					},
					{
						value: 'entertainment',
						label: '娱乐'
					},
					{
						value: 'education',
						label: '教育'
					},
					{
						value: 'medical',
						label: '医疗'
					},
					{
						value: 'business',
						label: '商务'
					},
					{
						value: 'other',
						label: '其他'
					}
				],
				selectedExpenseCategory: 0,
				accountingRecords: [],
				totalIncome: 0,
				totalExpense: 0,
				totalAmount: 0,
				actionSheetRecordId: null,
				showDeleteModal: false,
				deleteRecordId: ''
			};
		},
		onLoad() {
			this.initDateRange();
			this.loadAccountingRecords();
		},
		onShow() {
			this.loadAccountingRecords();
		},
		methods: {
			// 格式化日期为 yyyy-mm-dd 格式
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 格式化金额为带千分位的两位小数
			formatCurrency(amount) {
				return amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
			},
			// 切换筛选面板显示/隐藏
			toggleFilterPanel() {
				this.showFilterPanel = !this.showFilterPanel;
			},
			// 初始化日期范围为最近一个月
			initDateRange() {
				const endDate = new Date();
				const startDate = new Date();
				startDate.setMonth(startDate.getMonth() - 1);
				this.startDate = this.formatDate(startDate);
				this.endDate = this.formatDate(endDate);
			},
			// 处理开始日期变更
			onStartDateChange(e) {
				this.startDate = e.detail.value;
			},
			// 处理结束日期变更
			onEndDateChange(e) {
				this.endDate = e.detail.value;
			},
			// 处理记录类型变更
			onRecordTypeChange(e) {
				this.selectedRecordType = e.detail.value;
			},
			// 处理收入类型变更
			onIncomeCategoryChange(e) {
				this.selectedIncomeCategory = e.detail.value;
			},
			// 处理支出类型变更
			onExpenseCategoryChange(e) {
				this.selectedExpenseCategory = e.detail.value;
			},
			// 重置筛选条件
			resetFilter() {
				this.initDateRange();
				this.selectedRecordType = 0;
				this.selectedIncomeCategory = 0;
				this.selectedExpenseCategory = 0;
				this.applyFilter();
			},
			// 应用筛选条件
			applyFilter() {
				this.showFilterPanel = false;
				this.loadAccountingRecords();
			},
			// 加载并筛选记账记录
			loadAccountingRecords() {
				let records = this.mockRecords;
				// let records = uni.getStorageSync('accountingRecords') || [];
				records.sort((a, b) => new Date(b.date) - new Date(a.date));
				this.accountingRecords = records.filter(record => {
					const recordDate = new Date(record.date);
					const startDate = new Date(this.startDate);
					const endDate = new Date(this.endDate);
					if (recordDate < startDate || recordDate > endDate) return false;
					if (this.selectedRecordType !== 0 && record.type !== this.recordTypes[this.selectedRecordType]
						.value) return false;
					if (record.type === 'income' && this.selectedIncomeCategory !== 0 && record.category !== this
						.incomeCategories[this.selectedIncomeCategory].value) return false;
					if (record.type === 'expense' && this.selectedExpenseCategory !== 0 && record.category !== this
						.expenseCategories[this.selectedExpenseCategory].value) return false;
					return true;
				});
				this.updateStatistics();
			},
			// 更新收入支出统计数据
			updateStatistics() {
				this.totalIncome = this.accountingRecords.filter(record => record.type === 'income').reduce((sum,
					record) => sum + record.amount, 0);
				this.totalExpense = this.accountingRecords.filter(record => record.type === 'expense').reduce((sum,
					record) => sum + record.amount, 0);
				this.totalAmount = this.totalIncome - this.totalExpense;
			},
			// 显示/隐藏记录操作菜单
			showActionSheet(record) {
				this.actionSheetRecordId = this.actionSheetRecordId === record.id ? null : record.id;
			},
			// 确认删除记录（打开弹窗）
			confirmDelete(recordId) {
				this.actionSheetRecordId = null;
				this.deleteRecordId = recordId;
				this.showDeleteModal = true;
			},
			// 切换删除确认弹窗显示/隐藏
			toggleDeleteModal() {
				this.showDeleteModal = !this.showDeleteModal;
			},
			// 执行记录删除操作
			confirmDeleteRecord() {
				this.mockRecords = this.mockRecords.filter(record => record.id !== this.deleteRecordId);
				let records = uni.getStorageSync('accountingRecords') || [];
				records = records.filter(record => record.id !== this.deleteRecordId);
				uni.setStorageSync('accountingRecords', records);
				this.showDeleteModal = false;
				this.loadAccountingRecords();
				uni.showToast({
					title: '记录删除成功',
					icon: 'success'
				});
			}
		}
	};
</script>

<style>
	.accounting-container {
		min-height: 100vh;
		background-color: #f9fafb;
		padding-bottom: 80px;
		/* 避免内容被底部栏遮挡 */
	}

	.header-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.header-content {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		padding: 12px 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-left-section {
		display: flex;
		align-items: center;
	}

	.back-button {
		margin-right: 12px;
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #1e88e5;
	}

	.filter-button {
		color: #6b7280;
		padding: 8px;
		/* 扩大点击区域 */
	}

	.filter-panel {
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		background-color: #ffffff;
		padding: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		z-index: 90;
	}

	.filter-section {
		margin-bottom: 16px;
	}

	.filter-label {
		display: block;
		font-size: 12px;
		color: #6b7280;
		margin-bottom: 8px;
	}

	.date-range-picker {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.date-picker {
		flex: 1;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		font-size: 14px;
	}

	.date-separator {
		color: #6b7280;
	}

	.type-picker,
	.income-picker,
	.expense-picker {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		font-size: 14px;
	}

	.filter-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 16px;
	}

	.reset-button,
	.apply-button {
		padding: 8px 16px;
		border-radius: 8px;
		font-size: 14px;
	}

	.reset-button {
		background-color: #e5e7eb;
		color: #374151;
	}

	.apply-button {
		background-color: #1e88e5;
		color: #ffffff;
	}

	.stats-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		margin: 16px;
		margin-top: 72px;
		/* 避开顶部导航 */
	}

	.stat-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.income-card {
		border-left: 4px solid #10B981;
	}

	.expense-card {
		border-left: 4px solid #EF4444;
	}

	.stat-label {
		display: block;
		font-size: 14px;
		color: #6b7280;
		margin-bottom: 4px;
	}

	.stat-value {
		font-size: 20px;
		font-weight: 600;
	}

	.records-container {
		margin: 16px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.records-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.records-title {
		font-size: 16px;
		font-weight: 600;
	}

	.record-item {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		border-bottom: 1px solid #f3f4f6;
	}

	.record-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.income-icon {
		background-color: #e6f7ee;
	}

	.expense-icon {
		background-color: #fee2e2;
	}

	.record-details {
		flex: 1;
	}

	.record-category {
		display: block;
		font-size: 16px;
		font-weight: 500;
	}

	.record-date {
		display: block;
		font-size: 12px;
		color: #6b7280;
	}

	.record-amount {
		font-size: 16px;
		font-weight: 600;
		margin-right: 16px;
	}

	.income-amount {
		color: #10B981;
	}

	.expense-amount {
		color: #EF4444;
	}

	/* 操作按钮区域 */
	.record-actions {
		position: relative;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 操作菜单 */
	.action-menu {
		position: absolute;
		right: 0;
		top: 40px;
		width: 120px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		z-index: 1000;
		overflow: hidden;
	}

	.edit-action,
	.delete-action {
		display: flex;
		align-items: center;
		padding: 10px 16px;
		font-size: 14px;
	}

	.edit-action {
		color: #374151;
	}

	.delete-action {
		color: #EF4444;
	}

	.menu-icon {
		margin-right: 8px;
	}

	/* 菜单 hover 效果 */
	.edit-action:hover,
	.delete-action:hover {
		background-color: #f5f5f5;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-items: center;
		justify-content: center;
		padding: 48px 16px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin: 16px;
	}

	.empty-message {
		font-size: 14px;
		color: #6b7280;
		text-align: center;
	}

	.footer-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1px solid #e5e7eb;
		padding: 12px 16px;
		z-index: 80;
	}

	.footer-content {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.footer-actions {
		display: flex;
		gap: 8px;
	}

	.expense-button,
	.income-button {
		padding: 8px 16px;
		border-radius: 8px;
		font-size: 14px;
		display: flex;
		align-items: center;
	}

	.footer-icon {
		margin-right: 4px;
	}

	.expense-button {
		background-color: #42A5F5;
		color: #ffffff;
	}

	.income-button {
		background-color: #1e88e5;
		color: #ffffff;
	}

	.delete-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 200;
	}

	.modal-content {
		width: 90%;
		max-width: 400px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.modal-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.modal-title {
		font-size: 16px;
		font-weight: 600;
	}

	.modal-body {
		padding: 16px;
	}

	.modal-message {
		display: block;
		font-size: 14px;
		margin-bottom: 16px;
	}

	.modal-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}

	.cancel-button,
	.confirm-button {
		padding: 8px 16px;
		border-radius: 8px;
		font-size: 14px;
	}

	.cancel-button {
		background-color: #e5e7eb;
		color: #374151;
	}

	.confirm-button {
		background-color: #EF4444;
		color: #ffffff;
	}
</style>